import React from 'react';
import request from '../../../assets/js/utils/request';
import IScroll from '../../../assets/js/utils/iscroll';
import {GoPagePush, lazyImg, LocalParam} from '../../../assets/js/utils';
import Css from '../../../assets/css/home/goods/index.css';
class goodsClassify extends React.Component{
    constructor(){
        super();
        this.state={
            aClassifyItem:[],
        }
        this.myScroll=null;
    }
    componentDidMount(){
        this.getClassifyItemData(this.props)
    }
    UNSAFE_componentWillReceiveProps(newProps){
        this.getClassifyItemData(newProps)
    }
    //获取右侧列表数据
    getClassifyItemData(props){
        let cid=props.location.search?LocalParam(props.location.search).search.cid:'';
        request(window.base.config.baseUrl+'home/category/show?cid='+cid+'&token='+window.base.config.token,'get').then((res)=>{
            if (res.code===200){
                let temRes=res.data;
                this.setState({aClassifyItem:temRes},()=>{
                    this.eventIscroll();
                    lazyImg();
                    this.myScroll.on('scrollEnd',()=>{
                        lazyImg();
                    })
                })
            }else {
                this.setState({aClassifyItem:''})
            }
        })
    }
    //滚动
    eventIscroll(){
            document.getElementById("iscrollClassifyItem").addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            this.myScroll= new IScroll('#iscrollClassifyItem', {
                scrollX : false,
                scrollY : true,
                preventDefault : false
            });
    }
    //页面离开时移除滚动监听事件
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };

    }
    //进入历史记录页面
    goPage(purl){
        GoPagePush(this.props,purl)
    }
    render(){
        return(
                <div id={'iscrollClassifyItem'} className={Css['ItemScroll']}>
                    <div>
                        {
                            this.state.aClassifyItem.length>0?this.state.aClassifyItem.map((item,index)=>{
                                return(
                                    <div key={index}>
                                        <div className={Css['goodsClassifyTitle']}>{item.title}</div>
                                        <div className={Css['goodsClassifyLIst']}>
                                            <ul>
                                                {
                                                    item.goods!=null?item.goods.map((item1,index1)=>{
                                                        return(
                                                            <li key={index1}  onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item1.gid)}>
                                                                <div className={Css['goodsClassifyListImg']}>
                                                                    <img  src={require('../../../assets/images/commen/lazyImg.jpg')} alt={item1.title} data-echo={item1.image} />
                                                                </div>
                                                                <div className={Css['goodsClassifyListTitle']+' fs28'}>{item1.title}</div>
                                                            </li>
                                                        )
                                                    }):'没有相关产品'
                                                }
                                            </ul>
                                        </div>
                                    </div>
                                )
                            }):'没有相关产品'
                        }
                    </div>
                </div>
        )
    }
}
export default goodsClassify;